import React, { Component } from 'react'
import {Link, Route} from 'react-router-dom'

import Detail from "./Detail"

export default class Message extends Component {

    state = {
        Message: [
            {id: "01", title: "我爱你中国"},
            {id: "02", title: "你好再见"},
            {id: "03", title: "你很牛蛙"},
            {id: "04", title: "大了七八个"}
        ]
    }

    render() {
        const {Message} = this.state
        return (
            <div>
                <ul>
                    {
                        Message.map((item) => {
                            return <li key={item.id}>
                                    {/* params参数 */}
                                    {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>message{item.id}</Link> */}

                                    {/* search参数 */}
                                    {/* <Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>message{item.id}</Link> */}

                                    {/* state参数 */}
                                    <Link replace={true} to={{pathname: '/home/message/detail', state: {id: item.id, title: item.title}}}>message{item.id}</Link>
                                </li>
                        })
                    }
                </ul>

                {/* params 参数路由 数据在match.params中 */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}
                {/* search 参数路由 数据在location.search中 */}
                <Route path="/home/message/detail" component={Detail}/>
            </div>
        )
    }
}
